<template>
  <div>
    ts components
    <Son :list="personList" isVisible></Son>
  </div>
</template>

<script lang='ts' setup>
import { reactive } from 'vue';
import type { Person } from '@/types/person.ts';
import Son from './Son.vue';

const person: Person = {
  name: 'John',
  age: 25,
  city: 'New York'
}

const personList: Array<Person> = [
  // const personList:Array<any> = [
  // const personList: Person[] = [
  {
    name: 'John',
    age: 25,
    city: 'New York'
  },
  {
    name: 'Jane',
    age: 30,
    city: 'Los Angeles'
  }
]
console.log(person, personList);

//reactive结合ts 使用
let arrList = reactive<Person[]>([
  { name: 'John', age: 25, city: 'New York' },
  { name: 'Jane', age: 30, city: 'Los Angeles' }
])

console.log(arrList);


</script>

<style scoped lang='scss'></style>
